<template>
  <div id="home">
    <div class="scene">
      <div class="page page-1 active" style="z-index: 1" id="one">
        <div class="half left" style="z-index: 0">
          <button @click="close" style="width: 100px; height: 100px; background: transparent;float:right">
                    <img src="../images/two.png" style="width: 100%; height: 100%;"></button>
        </div>

        <div class="showingcss">
          <div style="height: 100%" @click="showing">
            <el-collapse-transition style="height: 100%">
              <div v-show="show3" style="height: 100%">
                <div class="transition-box"></div>
              </div>
            </el-collapse-transition>
          </div>
        </div>

        <div class="half right" style="z-index: 0">
            <div class="yasuo" > 
                <button @click="close" style="width: 100px; height: 100px; background: transparent;float:left">
                    <img src="../images/one.png" style="width: 100%; height: 100%;"></button>
                <span v-show="show1" class="news1">
                    <img src="../images/1.png" style="width: 100%; height: 60px;z-index: 0;">
                </span>
            </div>
        </div>
      </div>

      <div class="page page-2 previous small" style="z-index: 0" id="three">
        <div class="half left"></div>
        <div class="half right withText">
          <span class="heading">Page 3</span>
        </div>
      </div>
    </div>
  </div>
</template>
 <script>
import "@/assets/css/styles.css";
import "@/assets/js/stopExecutionOnTimeout.js";
export default {
  name: "home",
  data() {
    return {
      curPage: 1,
      scrolling: false,
      show3: true,
      show1: true,
    };
  },
  destroyed() {},
  methods: {
   
    close(){
      this.show1=!this.show1
    },
    showing() {
      this.show3 = false;
      this.navigateDown();
    },
    removeClass(oldName, searchone, searchtwo, searchthree) {
      for (let index = 0; index < oldName.length; index++) {
        var newName = oldName[index].className.split(searchone)[0];
        newName = newName.split(searchtwo)[0];
        newName = newName.split(searchthree)[0];
        document.getElementById(oldName[index].id).className = newName;
      }
    },
    pagination(page, movingUp) {
      this.scrolling = true;
      var diff = this.curPage - page,oldPage = this.curPage;
      this.curPage = page;
      this.removeClass(
        document.getElementsByClassName("page"),
        " active",
        " small",
        " previous"
      );

      var pageClass = document.getElementsByClassName("page-" + page)[0];
      document.getElementById(pageClass.id).className =
        pageClass.className + " active";
      if (page == 1) {
        while (page < 2) {
          if (window.CP.shouldStopExecution(1)) {
            break;
          }
          page++;
          var pageClass2 = document.getElementsByClassName("page-" + page)[0];
          document.getElementById(pageClass2.id).className =
            pageClass2.className + " previous";
          document.getElementById(pageClass2.id).className =
            pageClass2.className + " small";
        }
        window.CP.exitedLoop(1);
      }
      if (diff > 1) {
        for (var j = page + 1; j < oldPage; j++) {
          if (window.CP.shouldStopExecution(2)) {
            break;
          }
          $(".page-" + j + " .half").css(
            "transition",
            "transform .7s ease-out"
          );
        }
        window.CP.exitedLoop(2);
      }
      if (this.curPage == 1) {
        this.show3 = true;
      }
    },
    navigateUp() {
        
      if (this.curPage > 1) {
        this.curPage--;
        this.pagination(this.curPage, true);
      }
    },
    
    navigateDown() {
      if (this.curPage < 4) {
        this.curPage++;
        this.pagination(this.curPage);
      }
    },
  },
  mounted: function () {
    let that = this;
    window.addEventListener("mousewheel", function (e) {
      let direction = e.deltaY > 0 ? "down" : "up";
      if (direction == "up") {
        that.navigateUp();
      } else if (direction == "down") {
        that.showing();
      }
    });
    // window.addEventListener('click', '.scroll-btn', function () {
    //     if (scrolling)
    //         return;
    //     if ($(this).hasClass('up')) {
    //         navigateUp();
    //     } else {
    //         navigateDown();
    //     }
    // });
    window.addEventListener("keydown", function (e) {
      if (this.scrolling) return;
      if (e.which === 38) {
        navigateUp();
      } else if (e.which === 40) {
        navigateDown();
      }
    });
    // window.addEventListener('click', '.nav-btn:not(.active)', function () {
    // console.log($('.page'));
    //     if (scrolling)
    //         return;
    //     pagination(+$(this).attr('data-target'));
    // });
  },
  //   components: {
  //     pageheader: HelloWorld,
  //   },
};
</script>   
<style>
.yasuo {
    width: 70%;
    height: 20%;
    text-align: top;
    top:2%;left:2%;    
    position: relative;
}

.news1{
  /* background-image: url("../images/2.jpg"); */
  /* background-color: #409EFF; */
  background-size: cover;
  float:left;
  width: 70%;
  height: 100%;
}

.transition-box {
  margin-bottom: 10px;
  width: 100%;
  height: 114px ;
  border-radius: 4px;
  background-image: url("../images/come.png");
  background-size: cover;
  /* background-color: #409EFF; */
  text-align: center;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
.showingcss {
  position: relative;
  z-index: 500;
  top: 40%;
  left: 40%;
  width: 20%;
  height: 200PX;
}
</style>